import React, {Component} from 'react';
import styles from './Greeter.css';


class Slideimg extends Component{
    constructor(props) {
    super(props);
    this.state = {
top:0+'px'
    };
  }
    handleClickk()
    {
      this.setState({top:parseInt(this.state.top)-220+'px'})
    }
    handleClick()
    {
      this.setState({top:parseInt(this.state.top)+220+'px'})
    }
    render(){
        return (
        <div>		
            <div style={{border:'3px solid black',width:'160px',height:'440px',overflow:'hidden',position:'relative'}}>
                <div className={styles.pic} style={{top:this.state.top}}>
                   <img src={require('../img/pd.jpg')} style={{width:'160px',height:'220px',}} />
                   <img src={require('../img/pe.jpg')} style={{width:'160px',height:'220px',}} />
                   <img src={require('../img/pf.jpeg')} style={{width:'160px',height:'220px',}} />
                   <img src={require('../img/g.jpeg')} style={{width:'160px',height:'220px',}} />
                </div>
            </div>
            <button disabled={parseInt(this.state.top)==-440?"disabled":""} style={{width:'80px',height:'40px',border:'1px solid black',marginTop:'10px'}} onClick={()=>this.handleClickk()}>Down</button>
            <button disabled={parseInt(this.state.top)==0?"disabled":""} style={{width:'80px',height:'40px',border:'1px solid black',float:'left',marginTop:'10px'}} onClick={()=>this.handleClick()}>Up</button>
       </div>

        )
    }
}
export default Slideimg